﻿@page
@model FytSoa.Web.Pages.FytAdmin.Sys.AdminModifyToRoleModel
@{
ViewData["Title"] = "关联角色";
Layout = "~/Pages/FytAdmin/_Layout.cshtml";
}
<style>
    .layui-icon-export,
    .layui-icon-friends {
        margin-right: 5px;
        color: #aee4fa;
    }

    .role-item {
        padding: 6px 0px 6px 50px;
        cursor: pointer
    }

    .role-item.active {
        background-color: #dbedf5;
    }

    .layui-colla-content {
        padding: 0px;
        border-color: transparent;
    }

    .layui-colla-title {
        background-color: transparent
    }

    .layui-colla-item {
        border-color: transparent;
    }

    .role {

        height: 350px;
        border: 1px solid #dedede;
        border-radius: 4px;
        background: #f4f6f8;
    }

    #app {
        overflow: hidden;
        padding: 15px 40px;
    }

    h4 {
        line-height: 31px;
        font-size: 16px;
    }

    .layui-input-block {
        text-align: center;
        margin: 0px;
    }

    .role ul {
        padding: 10px;
    }

    .select-item {
        cursor: pointer;
        padding: 10px 5px;
    }

    .select-item:hover {
        background-color: #e7eaef;
    }

    .layui-col-xs2 {
        text-align: right;
    }
</style>
<div id="app">
    <div class="layui-row layui-col-space20">
        <div class="layui-col-sm6 layui-col-xs6">
            <h4>选择</h4>
            <div class="role layui-collapse" style="overflow: auto;">
                <div class="layui-colla-item" v-for="it in list" v-if="it.level==0">
                    <h2 class="layui-colla-title"><i class="layui-icon layui-icon-export"></i>{{it.name}}</h2>
                    <div class="layui-colla-content">
                        <div class="role-item" :class="active==row.guid?'active':''" v-for="row in list"
                            v-if="row.level==1 && row.parentGuid==it.guid" @@click="loaduser(row)"><i
                                class="layui-icon layui-icon-friends"></i>{{glnode(row.name)}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-xs6">
            <h4>已选</h4>
            <div class="role" style="overflow: auto;">
                <ul>
                    <li class="layui-row select-item" v-for="it in curList">
                        <div class="layui-col-xs10"><i class="layui-icon layui-icon-friends"></i>{{it.name}}</div>
                        <div class="layui-col-xs2"><i @@click="delCur(it)" class="layui-icon layui-icon-close"></i>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="layui-input-block">
        <button class="layui-btn" @@click="submits"><i
                class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-hide"></i>确定</button>
        <button type="button" class="layui-btn layui-btn-primary btn-open-close">取消</button>
    </div>
</div>
<script>
    var active, vm = new Vue({
        el: '#app',
        data: {
            list: {},
            active: '',
            curList: []
        },
        methods: {
            glnode(v) {
                return v.replace('　|--', '');
            },
            delCur(v) {
                this.curList.some((item, i) => {
                    if (item.guid == v.guid) {
                        this.curList.splice(i, 1);
                        return true;
                    }
                });
            },
            loaduser(v) {
                this.active = v.guid;
                let iscz = false;
                this.curList.some((item, i) => {
                    if (item.guid == v.guid) {
                        console.log(item);
                        iscz = true;
                        return true;
                    }
                });
                if (!iscz) {
                    v.name = this.glnode(v.name);
                    this.curList.push({ guid: v.guid, name: v.name });
                }
            },
            submits() {
                active.subSelect();
            }
        }
    });
    layui.config({
        base: '/themes/js/modules/'
    }).use(['element', 'layer', 'jquery', 'common'],
        function () {
            var element = layui.element,
                layer = layui.layer,
                $ = layui.jquery,
                os = layui.common,
                $$ = parent.layui.jquery;
            var index = parent.layer.getFrameIndex(window.name);
            var formId = os.getUrlParam('frameid');
            var role = os.getUrlParam('role');
            vm.curList = JSON.parse(unescape(role));
            $(".btn-open-close").on('click',
                function () {
                    parent.layer.close(index);
                });
            active = {
                initTree() {
                    os.ajax('api/role/getpages/', { limit: 1000 }, function (res) {
                        vm.list = res.data;
                        vm.$nextTick(function () {
                            element.render();
                        });
                    }, 'get');
                },
                subSelect() {
                    if (vm.curList.length < 1) {
                        os.error('请选择角色');
                        return;
                    }
                    var frames = $$("#" + formId)[0].contentWindow;
                    frames.oc.saveRole(JSON.stringify(vm.curList));
                    parent.layer.close(index);
                }
            }
            active.initTree();
        });
</script>